<template>
    <el-sub-menu :index=menu.path>
        <template #title>
            <el-icon>
                <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.menuName }}</span>
        </template>
        <el-menu-item v-for="menuChild in menu.childs" :index="menuChild.path"
            @click="addTab(menuChild.menuName, menuChild.path)">
            <template #title>
                <el-icon>
                    <component :is="menuChild.icon" />
                </el-icon>
                <span>{{ menuChild.menuName }}</span>
            </template>
        </el-menu-item>
    </el-sub-menu>
</template>

<script setup>
import { toRefs } from 'vue'
import { useTabsStore } from '@/store/tabs'

const tabsStore = useTabsStore() //使用tabs的pinia
const props = defineProps(['menu']) //获取父组件传递的menu菜单信息
const { menu } = toRefs(props) // 保持响应性的解构

//新增Tab方法通过pinia调用
function addTab(title, path) {
    tabsStore.addTab(title, path)
}
</script>

<style scoped></style>